<template>
  <div class="modal-overlay" v-if="isOpen" @click="$emit('close')">
    <div class="review-form" @click.stop>
      <h3 class="form-title">评价订单</h3>
      
      <!-- 评分部分 -->
      <div class="rating-section">
        <div class="rating-label">整体评分</div>
        <div class="stars-container">
          <i 
            v-for="star in 5" 
            :key="star"
            :class="[
              'fa', 
              star <= rating ? 'fa-star' : 'fa-star-o',
              {'active': star <= rating}
            ]"
            @click="setRating(star)"
          ></i>
        </div>
        <div class="rating-text">{{ ratingText }}</div>
      </div>
      
      <!-- 评价内容 -->
      <div class="content-section">
        <textarea 
          v-model="content" 
          placeholder="请输入您对商家的评价（口味、服务、包装等）" 
          rows="4"
          maxlength="500"
        ></textarea>
        <div class="char-count">{{ content.length }}/500</div>
      </div>
      
      <!-- 匿名评价选项 -->
      <div class="anonymous-section">
        <label class="checkbox-container">
          <input type="checkbox" v-model="isAnonymous">
          <span class="checkmark"></span>
          匿名评价
        </label>
        <span class="anonymous-tip">匿名评价不会显示您的用户名</span>
      </div>
      
      <!-- 提交按钮 -->
      <div class="button-section">
        <button class="cancel-btn" @click="$emit('close')">取消</button>
        <button 
          class="submit-btn" 
          :disabled="!isValid || isSubmitting"
          @click="submitReview"
        >
          {{ isSubmitting ? '提交中...' : '提交评价' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits, watch } from 'vue';
import { inject } from 'vue';

const axios = inject('axios'); // 注入axios实例

const props = defineProps({
  order: {
    type: Object,
    default: null
  },
  isOpen: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['close', 'success']);

// 表单数据
const rating = ref(0);
const content = ref('');
const isAnonymous = ref(false);
const isSubmitting = ref(false);

// 评分文字描述
const ratingText = computed(() => {
  switch (rating.value) {
    case 1: return '非常差';
    case 2: return '较差';
    case 3: return '一般';
    case 4: return '很好';
    case 5: return '非常好';
    default: return '请评分';
  }
});

// 表单验证
const isValid = computed(() => {
  return rating.value > 0;
});

// 设置评分
const setRating = (value) => {
  rating.value = value;
};

// 当弹窗打开时重置表单
watch(() => props.isOpen, (newVal) => {
  if (newVal) {
    resetForm();
  }
});

// 重置表单
const resetForm = () => {
  rating.value = 0;
  content.value = '';
  isAnonymous.value = false;
  isSubmitting.value = false;
};

// 提交评价
const submitReview = async () => {
  if (!isValid.value || !props.order) return;
  
  try {
    isSubmitting.value = true;
    
    // 准备评价数据
    const reviewData = {
      orderId: props.order.id,
      businessId: props.order.business?.id,
      rating: rating.value,
      content: content.value.trim(),
      isAnonymous: isAnonymous.value
    };
    
    console.log('提交评价数据:', reviewData);
    
    // 发送评价请求
    const response = await axios.post('/api/reviews', reviewData);
    
    // 处理成功响应
    console.log('评价提交成功:', response.data);
    
    // 显示成功消息
    alert('评价提交成功！感谢您的反馈。');
    
    // 通知父组件
    emit('success', response.data);
    
  } catch (error) {
    console.error('评价提交失败:', error);
    alert(`评价提交失败: ${error.response?.data?.message || error.message || '请稍后重试'}`);
    emit('close');
  } finally {
    isSubmitting.value = false;
  }
};
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.review-form {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.form-title {
  font-size: 18px;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

.rating-section {
  margin-bottom: 20px;
  text-align: center;
}

.rating-label {
  margin-bottom: 10px;
  color: #666;
  font-size: 14px;
}

.stars-container {
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
}

.stars-container i {
  font-size: 30px;
  color: #ddd;
  margin: 0 5px;
  cursor: pointer;
}

.stars-container i.active {
  color: #ffc107;
}

.rating-text {
  font-size: 14px;
  color: #ff6b35;
  height: 20px;
}

.content-section {
  margin-bottom: 20px;
  position: relative;
}

textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: none;
  font-size: 14px;
}

textarea:focus {
  border-color: #0097ff;
  outline: none;
}

.char-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 12px;
  color: #999;
}

.anonymous-section {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.checkbox-container {
  display: flex;
  align-items: center;
  margin-right: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}

.checkbox-container input {
  margin-right: 5px;
}

.anonymous-tip {
  font-size: 12px;
  color: #999;
}

.button-section {
  display: flex;
  justify-content: space-between;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666;
}

.submit-btn {
  background-color: #0097ff;
  color: #fff;
}

.submit-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style> 